<template>
	<view class="view" style="display: flex;flex-direction: column;position: relative;">
		<view style="display: flex;flex-direction: row; justify-content: left;align-items: center;"
			v-for="(item,index) in shopping" :key="index">
			<checkbox-group @change="changegroup($event,index)">
				<label>
					<checkbox :value="item.id" checked="true" />
				</label>
			</checkbox-group>
			<view style=" ">
				<image @click="imageto(index)" :src="item.cake.cakeImage" mode="aspectFit"
					style="width: 240px; height: 240px;"></image>
			</view>
			<view style="padding-left: 10px; display: flex; flex-direction: column;">
				<text>{{item.cake.cakeName}}</text>

				<text>购买数:{{item.cake.cakeNumber}}</text>
				<!-- <text>购买数:{{item.}}</text> -->
				<uni-rate :max="5" :value="item.cake.cakeScore" />
				<text style="font-weight: bold;color: #800;">${{item.cake.cakeMoney}}</text>
				<view style="display: flex;">
					<button @click="subtraction(index)" type="default"
						style="width: 30px; height: 30px; font-size: 12px; justify-content: center; align-items: center;">-</button>
					<uni-easyinput v-model="item.number" placeholder="" type="number" :clearable="false" trim="all"
						@blur="blur(index)" />
					<button @click="addition(index)" type="default"
						style="width: 30px; height: 30px; font-size: 12px; justify-content: center;align-items: center;">+</button>
				</view>
				<button style="margin-top: 10px;" type="warn" @click="det(index)">删除</button>
			</view>
		</view>
		<view style="bottom: 10rpx; width: 100%; position: absolute;">
			<uni-section type="line">
				<uni-goods-nav :buttonGroup="buttonGroup" :options="options" :fill="true" @buttonClick="buttonClick" />
			</uni-section>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopping: [],
				idlist: [],

				options: [{
					icon: 'map',
					text: '金额',
					info: 0
				}],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				userId:null,
			}
		},

		methods: {
			buttonClick() {
				console.log("this.idlist: " + JSON.stringify(this.idlist));
				uni.request({
					url: this.api.addOrder,
					method: 'POST',
					data: {
						ids: this.idlist
					},
					success: res => {
						if (res.data.code == 200) {
							this.getShopping(this.userId)
							uni.navigateTo({
								url: "/pages/perfect/perfect?OrderId="+res.data.obj,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getmoney() {
				for (var i = 0; i < this.shopping.length; i++) {
					if (this.idlist[i] == this.shopping[i].id) {
						this.options[0].info = this.options[0].info + this.shopping[i].number * this.shopping[i].cake
							.cakeMoney
					}
				}

			},

			changegroup(e, index) {
				// console.log("e: " + JSON.stringify(e));
				// console.log(e);
				// console.log(index);
				this.idlist[index] = e.detail.value[0]
				console.log(this.idlist);
				this.options[0].info = 0
				this.getmoney()
			},
			Number(number, index) {
				uni.request({
					url: this.api.updateNumberChange,
					method: 'PUT',
					data: {
						id: this.shopping[index].id,
						number: number
					},
					success: res => {
						this.getShopping(this.shopping[index].userId)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			subtraction(index) {
				let number = this.shopping[index].number - 1
				this.Number(number, index)
			},
			addition(index) {
				let number = this.shopping[index].number + 1
				this.Number(number, index)
			},
			blur(index) {

				// console.log( this.shopping[index].number);
				let number = this.shopping[index].number
				this.Number(number, index)
			},
			det(index) {
				uni.request({
					url: this.api.deleteOrder,
					method: 'POST',
					data: {
						id: this.shopping[index].id
					},
					success: res => {

						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})

						this.getShopping(this.shopping[index].userId)


					},
					fail: () => {},
					complete: () => {}
				});
			},
			imageto(index) {
				uni.navigateTo({
					url: '/pages/cake/cake?id=' + this.shopping[index].cakeId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getShopping(id) {
				uni.request({
					url: this.api.findShopping,
					method: 'GET',
					data: {
						userId: id
					},
					success: res => {
						this.idlist = []
						this.options[0].info = 0
						if (res.data.code == 200) {
							this.shopping = res.data.obj
							for (var i = 0; i < this.shopping.length; i++) {
								this.shopping[i].cakeImage = "http://localhost:8989" + this.shopping[i]
									.cakeImage
								this.idlist.push(this.shopping[i].id)
							}
							console.log(this.idlist);
							this.getmoney()
						}
					},
					fail: (err) => {
						console.log("err: " + JSON.stringify(err));
					},
					complete: () => {}
				});
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				let user = uni.getStorageSync('token')
				this.userId = user.userId
				this.getShopping(this.userId)
			}
		}
	}
</script>

<style>
	page,
	.view {
		width: 100%;
		height: 100%;
	}
</style>
